import React from 'react';
import { connect } from "react-redux";
import { loadGetPerformanceTypeDataAsync } from "@/components/main/index/actionCreator";
import { ChildPlay } from "@/components/main/index/styled";
import Swiper from "@/components/common/swiper.jsx";

// 儿童剧
class child_play extends React.Component{
	render(){
		let data = this.props.performancetype.toJS();
		let arr = [];
		for(let key in data){
			arr.push(data[key]);
		}

    return (
      <ChildPlay>
				{
					arr.map((item,index)=>
						(<div className="performance" key={index}>
								<div className="top" >
									<span>{item.title}</span>
									<span className="right">></span>
								</div>
								<div className="middle">
									<a href={item.search_url}>
										<img src={item.list[0].pic} alt={item.title}/>
										<span className="data">{item.list[0].display_show_time}{item.list[0].week}{item.list[0].schedular_name}</span>
										<span className="local">
											{item.list[0].city_name}|{item.list[0].venue_name}
										</span>
									</a>
								</div>
								<div className="bottom">
									<Swiper id={"tosctions"} config={{
									  slidesPerView: 3,
									  spaceBetween: 30,
									}}>
									  {
									    item.list.map((value, inde) => (
									      <div className="swiper-slide" key={inde}>
									        <a href={value.url}>
														<div style={{ width: "106px", height: "210px" }}>
														{/* {console.log(value)} */}
														  <img src={value.pic} alt={value.schedular_name}/>
															<p className="schedular_name">{value.schedular_name}</p>
															<p className="low_price">{value.low_price}<span>起</span></p>
														</div>
													</a>
									      </div>
									    ))
									  }
									</Swiper>
								</div>					
						</div>				
					))
				}
			</ChildPlay>
    )
  }

 componentDidMount(){
    this.props.loadGetPerformanceTypeDataAsync.bind(this)();
  }
};
const mapStateToProps = state => {
  return {
    currentCity: state.getIn(["indexReducer", "currentCity"]),
    performancetype:state.getIn(["indexReducer","performancetype"])
  };
};
const mapDispatchToProps = dispatch => {
  return {
    loadGetPerformanceTypeDataAsync(){
      loadGetPerformanceTypeDataAsync(dispatch,{city_id:this.props.currentCity.get("city_id")})
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(child_play);

